<template>
	<u-popup :show="isShow" mode="bottom" border-radius='20' @close='close' closeable>
		<view class="content">
			<view class="header">
				<image :src="itemModel.coverUrl" mode="" style="width: 160rpx;height: 160rpx;"></image>
				<view class="right">
					<view style="margin-top: 10rpx;color: #fa3534;"
					v-if="itemModel.activityKey=='incomesDeduction'">
						<text>¥{{ $count.mul(itemModel.sellingPrice||0, 1) }}</text>
						<text>+</text>
						<text>{{ $count.mul(itemModel.incomesPrice||0, 1) }}积分</text>
					</view>
					<view v-else style="margin-top: 10rpx;color: #fa3534;" v-if="itemModel.priceModel">¥{{$count.mul(itemModel.priceModel.sellingPrice||0, 1)}}</view>
					<text>库存 {{itemModel.stock}}</text>
					<text v-if="itemModel.specs_sel" style="margin-top: 10rpx;">已选择  {{itemModel.specs_sel}}</text>
				</view>
			</view>
			<scroll-view class="item_cont" :scroll-y="true" :style="{paddingBottom: 60+safeAreaBottom + 'px'}">
				<sku-content ref="skuContent" @click='skuSpecClick' :specList='itemModel.specList'></sku-content>
				<view style='display: flex;flex-direction: row;justify-content: space-between;margin-top: 20rpx;padding-bottom: 80rpx;padding-top: 30rpx;'>
					<view style="color: #333333;font-weight: bold;">数量</view>
					<wm-numberBox v-model="payCount" :min="0" :max="itemModel.stock" @change="payCountChange"></wm-numberBox>
				</view>
			</scroll-view>
			<!-- <view class="footer">
				<jc-button :width='600' @click='confirm' backgroundColor='#FC5E53' :circle='true' title="立即购买"></jc-button>
			</view> -->
			
			<view style="position: fixed;width: 750rpx;height: 60px;background: #FFF;padding-top: 16rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;"
			 :style="{bottom: 60+safeAreaBottom + 'px'}">
				<view v-if="!item.hidden" v-for="(item,index) in buttonGroup" :key="index" :style="{background:item.backgroundColor,color:item.color}"
				 style="width: 300rpx;height: 40px;line-height: 40px;text-align: center;" @click="buttonClick(item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import skuContent from './sku_content.vue'
	import wmNumberBox from '@/components/wm-numberBox/wm-number-box.vue'
	import { common } from '@/api/common' 
	export default{
		components:{skuContent, wmNumberBox},
		props:{
			itemModel: {
				type: Object,
				default: ()=>{}
			},
			safeAreaBottom: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				isShow: false,
				confirmStyle:{
					backgroundColor: '#059595'
				},
				payCount: 1,
				buttonGroup: [{
				      text: '加入购物车',
				      backgroundColor: '#8b5bfd',
				      color: '#fff',
					  key: 'joinShopCart'
				    },
				    {
				      text: '立即购买',
				      backgroundColor: '#FC5E53',
				      color: '#fff',
					  key: 'pay'
				    }
				],
				scene: '',
			}
		},
		methods:{
			show(scene){
				this.scene = scene
				this.isShow = true
			},
			close(){
				this.isShow = false
				this.$emit('close')
			},
			open(){
				this.$emit('open')
			},
			buttonClick(item){
				console.log('item', item, this.itemModel)
				if(item.key == 'pay'){
					this.confirm()
				}else if(item.key == 'joinShopCart'){
					var params = {
						scene: this.scene,
						item: this.itemModel.id,
						sku: this.itemModel.skuId,
						specValues: this.itemModel.specValues,
						payCount: this.payCount
					}
					common.operateActionPost('/merchant/shopCart/jsonShopCart/', params).then(res => {
						if(res.data.code == 10000){
							uni.showToast({
								title: '已加入购物车',
								icon:'none'
							})
							this.$emit('joinShopCartSuccess')
						}
					})
				}
			},
			skuSpecClick(spec, index, index2){
				this.$emit('skuSpecClick', spec, index, index2)
			},
			payCountChange(e){
				this.payCount = e.value
			},
			confirm(){
				if(this.itemModel.stock < this.payCount){
					this.$show.showMessage('库存不足！')
				}else if(this.payCount <= 0){
					this.$show.showMessage('购买数量需大于0！')
				}else{
					this.$emit('confirm', this.payCount)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 30rpx;
		.header{
			display: flex;
			flex-direction: row;
			padding-bottom: 20rpx;
			.right{
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				justify-content: flex-end;
				text{
					font-size: 28rpx;
				}
			}
		}
		.item_cont{
			min-height: 600rpx;
			max-height: 800rpx;
		}
		.footer{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
</style>
